<template>
  <a-modal width="480px" v-model="innerVisible" @cancel="cancel">
    <div slot="title" class="title">
      <span>{{ $t('all.autotext292') }}</span>
      <em>{{ $t('all.autotext643') }}</em>
    </div>
    <a-form-model
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 15 }"
      ref="ruleForm"
      :model="form"
      :rules="rules"
    >
      <a-form-model-item :label="$t('all.autotext976')" prop="bankCardNo">
        <a-input v-model="form.bankCardNo" style="width: 100%" @change="cardNumChange"/>
      </a-form-model-item>
      <!--  -->
      <template>
        <a-form-model-item v-show="bankInfo.bankName" :label="$t('all.autotext497')">
          {{ bankInfo.bankName }}
        </a-form-model-item>
        <a-form-model-item v-show="bankInfo.bankName" :label="$t('all.autotext508')" prop="bankAccount">
          <a-input v-model="form.bankAccount" />
        </a-form-model-item>
        <a-form-model-item v-show="bankInfo.bankName" :label="$t('all.autotext20')" prop="bankOpenInfo">
          <a-input v-model="form.bankOpenInfo" :placeholder="this.$t('all.autotext380')" />
        </a-form-model-item>
      </template>
    </a-form-model>

    <div slot="footer" class="dialog-footer">
      <a-button @click="cancel">{{ $t('all.autotext975') }}</a-button>
      <a-button type="primary" @click="submit">{{ $t('all.autotext49') }}</a-button>
    </div>
  </a-modal>
</template>

<script>
import modalMixin from '@/utils/modal.mixin'
import { getBankName, addBank, checkBank } from '@/api/account/user'

export default {
  props: ['userId', 'ptsId'],
  mixins: [modalMixin],
  data () {
    return {
      form: {
        bankCardNo: '',
        bankAccount: '',
        bankOpenInfo: ''
      },
      bankInfo: {},
      rules: {
        bankCardNo: [
          { required: true, message: this.$t('all.autotext711'), trigger: 'blur' },
          { pattern: /^(\d{16}|\d{19}|\d{18}|\d{17})$/, message: this.$t('all.autotext1360') }
        ],
        bankOpenInfo: [{ required: true, message: this.$t('all.autotext711'), trigger: 'blur' }],
        bankAccount: [{ required: true, message: this.$t('all.autotext711'), trigger: 'blur' }]
      },
      flag: true
    }
  },
  methods: {
    submit () {
      this.$refs.ruleForm.validate(async valid => {
        if (!valid) return
        if (!this.flag) return
        this.flag = false
        try {
          await checkBank({
            bankCard: this.form.bankCardNo,
            name: this.form.bankAccount
          })
          await addBank({
            ...this.form,
            bankName: this.bankInfo.bankName,
            logoUrl: this.bankInfo.backImgUrl,
            type: 2,
            userAuthorizeId: this.userId,
            ptsId: this.ptsId
          })
          this.flag = true
          this.innerVisible = false
          this.form = {}
          this.bankInfo = {}
          this.$message.success(this.$t('all.autotext470'))
          this.$emit('refresh')
        } catch (err) {
          this.flag = true
        }
      })
    },
    cancel () {
      this.$refs.ruleForm.resetFields()
      this.bankInfo = {}
      this.innerVisible = false
    },
    async cardNumChange () {
      if (/^(\d{16}|\d{19}|\d{18}|\d{17})$/.test(this.form.bankCardNo)) {
        const res = await getBankName({ bankcard: this.form.bankCardNo })
        this.bankInfo = res
      }
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  em {
    font-size: 12px;
    color: #e04b28;
    margin-left: 5px;
  }
}
</style>
